<template>
  <el-card class="vehicle-management">
    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-input
        v-model="searchKey"
        placeholder="可输入车辆类型、车牌号、司机"
        style="width: 200px; margin-right: 10px"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset" style="margin-left: 10px">重置</el-button>
    </div>

    <!-- 车辆列表表格 -->
    <div class="table-section">
      <el-table :data="vehicleTableData" border style="width: 100%">
        <el-table-column prop="type" label="车辆类型" align="center" />
        <el-table-column prop="plateNo" label="车牌号" align="center" />
        <el-table-column prop="driver" label="司机" align="center" />
        <el-table-column prop="department" label="所属部门" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleVehicleOperate(scope.row)"
              >调度</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 已调配车辆表格 -->
    <div class="table-section">
      <h4>已调配车辆</h4>
      <el-table :data="allocatedVehicleData" border style="width: 100%">
        <el-table-column prop="eventName" label="事件名称" align="center" />
        <el-table-column prop="vehicleName" label="车辆名称" align="center" />
        <el-table-column prop="longitude" label="经度" align="center" />
        <el-table-column prop="latitude" label="纬度" align="center" />
        <el-table-column prop="dispatcher" label="调度人" align="center" />
        <el-table-column prop="dispatchTime" label="调度时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleAllocatedOperate(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "VehicleManagement",
  data() {
    return {
      searchKey: "", // 搜索关键字
      vehicleTableData: [], // 车辆列表数据
      allocatedVehicleData: [], // 已调配车辆数据
    };
  },
  mounted() {
    // 初始化数据（实际项目中可替换为接口请求）
    this.vehicleTableData = [];
    this.allocatedVehicleData = [];
  },
  methods: {
    // 执行车辆搜索
    handleSearch() {
      console.log("搜索条件：", this.searchKey);
      // 实际项目中对接接口，筛选车辆数据
    },
    // 重置搜索条件
    handleReset() {
      this.searchKey = "";
    },
    // 车辆调度操作
    handleVehicleOperate(row) {
      console.log("调度车辆：", row);
      // 实际项目中可打开调度弹框，处理后续逻辑
    },
    // 已调配车辆详情操作
    handleAllocatedOperate(row) {
      console.log("查看调配详情：", row);
      // 实际项目中可打开详情弹框
    },
  },
};
</script>

<style lang="scss" scoped>
.vehicle-management {
  padding: 15px;

  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .table-section {
    margin-bottom: 20px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
  }
}
</style>
